<template>
    <div class="my-select">
        <select :id="id" class="js-states form-control" :multiple="multiple"></select>
    </div>
</template>

<script>
    export default {
        name: "MySelect",
        props: {
            id: {
                type: String,
                default: 'my-select'
            },
            placeholder: {
                type: String,
                default: ''
            },
            searchable: {
                type: Boolean,
                default: false
            },
            options: {
                type: Array,
                default: []
            },
            ajax: {
                type: Object,
                default: null
            },
            defaultLabel: {
                type: String | Number,
                default: ''
            },
            value: {
                type: String | Number,
                default: ''
            },
            detail: {
                type: Boolean,
                default: false
            },
            multiple: {
                type: Boolean,
                default: false
            },
            minimumInputLength: {
                type: String | Number,
                default: 0
            },
        },
        data() {
            return {
                innerValue: '',
                label: ''
            }
        },
        methods: {
            init() {
                $.fn.modal.Constructor.prototype.enforceFocus = function () {
                }; //加入这一行，就可以输入拉
                let dom = $(`#${this.id}`)
                dom.select2({
                    minimumResultsForSearch: this.searchable ? 0 : -1, // 去掉搜索框
                    matcher: this.searchable ? this.matchCustom : false,
                    placeholder: this.placeholder,
                    allowClear: true,
                    data: this.options,
                    ajax: this.ajax,
                    cache: true,
                    width: '100%',
                    minimumInputLength: this.minimumInputLength,
                })

                dom.on('change', (e) => {
                    // this.label = e.target.children[0].innerText
                    let output = this.multiple ? dom.select2('val').join(';') : !isNaN(parseInt(e.target.value)) ? parseInt(e.target.value) : e.target.value
                    this.$emit('input', output)
                });


                if (this.defaultLabel) {
                    $(`#${this.id}`).html('<option value="' + (this.innerValue + '">' + (this.defaultLabel + '</option>'))).trigger("change");
                } else if (this.innerValue) {
                    $(`#${this.id}`).html('<option value="' + (this.innerValue + '">' + (this.innerValue + '</option>'))).trigger("change");
                } else if (!this.options.length) {
                    $(`#${this.id}`).html('')
                }
            },
            matchCustom(params, data) {
                // If there are no search terms, return all of the data
                if ($.trim(params.term) === '') {
                    return data;
                }

                // Do not display the item if there is no 'text' property
                if (typeof data.text === 'undefined') {
                    return null;
                }

                // `params.term` should be the term that is used for searching
                // `data.text` is the text that is displayed for the data object
                if (data.text.indexOf(params.term) > -1) {
                    return $.extend({}, data, true);
                }

                // Return `null` if the term should not be displayed
                return null;
            },
        },
        created() {
            //this.label = this.
            if (!this.multipie) {
                this.innerValue = this.value
            }
        },
        mounted() {
            this.init()
        },
        watch: {
            value() {
                this.innerValue = this.value
            },
            defaultLabel() {
                if (this.defaultLabel) {
                    $(`#${this.id}`).html('<option value="' + (this.innerValue + '">' + (this.defaultLabel + '</option>'))).trigger("change");
                } else if (this.innerValue) {
                    $(`#${this.id}`).html('<option value="' + (this.innerValue + '">' + (this.innerValue + '</option>'))).trigger("change");
                } else if (!this.options.length) {
                    $(`#${this.id}`).html('')
                }
            },
        }
    }
</script>

<style scoped lang="stylus">

</style>